<template>
	<view class="one"> 
		<!--mode设置多级选择器， 绑定多维数组  当前选择的值 绑定change事件进行监听选择器的值-->
			<picker mode="multiSelector" :range="dateTimeArray"  :value="dateTime" @change="change" @columnchange="columnchange">
				<view>
					<input type="text" disabled="true" v-model="upTower" placeholder="请选择时间" />
				</view>
			</picker>
		</view>
</template>

<script lang="ts" setup>
import dateTimePicker from '../../utils/dateTimePicker1.js'
import arr from '../../utils/dateTimePicker1.js'
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
let dateTimeArray = ref(null)
let dateTime = ref(null)
let startYear= 2019
let endYear=2029
let	upTower=ref("请选择时间")

onLoad(()=>{
		let arr = '2024/8/08 10:00'
		// dateTimePicker初始化时间选择器
		// 不传参是默认日期，开始结束默认
		let obj = dateTimePicker.dateTimePicker(startYear, endYear, arr)
		console.log('obj',obj)
		dateTimeArray.value = obj.dateTimeArray
		console.log('dateTimeArray',dateTimeArray)
		dateTime.value = obj.dateTime
})
//时间格式化
		let withData = (param:any)=> {
				return param < 10 ? '0' + param : '' + param;
			}
			// 选择器的值发生改变
		let	change=(e)=> {
				let value = []
				console.log('111',e.detail);
				e.detail.value.forEach((val, index) => {
					value.push(withData(val))
				})
				console.log(e.detail.value);
				// 年月日时分
				let dateArray = "20" + (Number(value[0])+18) + "-" + (Number(value[1])+1) + "-" + (Number(value[2])+1) + " " + value[3] + ":" + value[4]*10
				console.log('ppp',dateArray);
				upTower.value = dateArray
			}
			// 处理列发生变化,更新对应列的数据并重新计算每月的天数
		let	columnchange=(e)=> {
				let dateArr = dateTimeArray.value
				let arr = dateTime.value
				//滑动所在列的数据并对其值进行更新
				arr[e.detail.column] = e.detail.value
				//更新展示月份对应的天数（28 or 29 or 30 or 31）
				dateArr[2] = dateTimePicker.getMonthDay(dateArr[0][arr[0]], dateArr[1][arr[1]])
				//最后把最新的数值赋值到dateTimeArray
				dateTimeArray.value = dateArr
				dateTime.value = arr
			}
</script>

<style>
.one {
		width: calc(100% - 40rpx);
		margin: 20rpx;
	}

	.one .wrap {
		margin: 20rpx 0;
	}

	.one .wrap .title {
		line-height: 88rpx;
	}

	.one .wrap .item {
		width: 100%;
		height: 88rpx;
		border: 1px solid #ccc;
		border-radius: 44rpx;
		box-sizing: border-box;
		text-indent: 20rpx;
	}

	.one .wrap .item2 {
		width: 100%;
		border: 1px solid #ccc;
		border-radius: 44rpx;
		box-sizing: border-box;
		text-indent: 20rpx;
	}
</style>
